<template>
  <!-- xxdwzList:坐标字符串 -->
  <div class="absolute w-full h-full top-0 left-0">
    <span class="text-red-600"> 温馨提示：红色代表标准答案不一致 ， 绿色代表与标准答案一致 </span>
    <div v-for="(item, num) in result" :key="item?.id" v-show="item.dtkqtid == imgInfo?.id">
      <div
        class="absolute w-[45px] h-[28px] cursor-pointer border-2"
        v-for="(area, index) of item.xxdwzList"
        :key="area"
        :style="{
          top: `${Number(area.split(',')[1]) - 14}px`,
          left: `${Number(area.split(',')[0]) - 19}px`,
        }"
        @mouseenter="showPopFun(num)"
        :class="
          item?.sbdjgList && item.sbdjgList[index] === '1' && item.ckda && item.ckda[index] === '1'
            ? 'border-green-600'
            : item?.sbdjgList && item.sbdjgList[index] === '1'
            ? 'border-red-600'
            : ''
        "
      >
        <span
          class="text-[13px] text-red-600 font-semibold"
          v-if="props?.onelyShow && item?.pyDa?.includes('Z') && !index"
        >
          未作答
        </span>
      </div>
    </div>

    <div
      class="absolute w-[240px] h-[220px] text-white bg-gray-400"
      v-if="Data.showPopup"
      @mousewheel.stop
      :style="popuStyle"
      @mouseleave="hidePopFun()"
    >
      <div class="px-1 box-border">
        <div>说明：若系统识别选项与考生填图选项不符，请按考生填图选项勾选。</div>
      </div>

      <div class="flex justify-end h-[calc(100%-50px)] pb-8 pt-2">
        <div class="text-[16px] w-[40px] text-center font-semibold">
          {{ Data.showIndex + 1 }}
        </div>
        <div class="h-full flex-1">
          <div class="w-9/10 h-full overflow-y-auto">
            <div class="radio-box">
              <a-checkbox-group v-model:value="Data.popuObj.setCkda" @change="handelChange($event)">
                <a-row>
                  <a-col :span="24" :key="item.value" v-for="item in Data.popuObj?.radioLength">
                    <a-checkbox :value="item.value">
                      {{ item.label }}
                    </a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </div>
          </div>
          <a-button
            size="small"
            type="primary"
            class="px-2 cursor-pointer !absolute bottom-2 right-2"
            @click.stop="confirmAnwser()"
          >
            修改
          </a-button>
        </div>
      </div>
    </div>
  </div>
  <div
    class="absolute left-[calc(100%-100px)] text-red-500 font-semibold text-[15px] whitespace-nowrap"
    v-if="props.onelyShow"
    :style="{
      transform: `scale(${1 / props.scale})`,
      transformOrigin: '0 0',
      transition: '0.3s',
    }"
  >
    <div v-if="reviewShowInfo?.jsxm" class="mb-2">
      评阅教师:({{ reviewShowInfo?.jsxm }}){{ reviewShowInfo?.account }}, 得分:{{
        reviewShowInfo?.pyZdf
      }}
    </div>
    <div
      class="mb-2"
      :class="item.pyZdf ? 'text-green-600' : 'text-red-500'"
      :key="item.stId"
      v-for="(item, index) in pyZycKgtList"
    >
      <span class="inline-block min-w-[90px] text-center">（{{ item.tmbh }}）</span>
      ：{{ item.pyDaText }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, watch } from 'vue'
import { useTeacherMarkStore } from '/@/store/modules/teacherMark'
const teacherMarkStore = useTeacherMarkStore()
const currentTopic = computed(() => teacherMarkStore.getCurrentTopic ?? {})

const props = defineProps({
  result: {
    type: Array,
    default: () => [],
  },
  scale: {
    type: Number,
    default: 1,
  },
  imgInfo: {
    type: Object,
    default: () => {},
  },
  onelyShow: {
    type: Boolean,
    default: true,
  },
  pyZycKgtList: {
    type: Array,
    default: () => [],
  },
  reviewShowInfo: {
    type: Object,
    default: () => {},
  },
} as any)

const Data = reactive({
  showPopup: false,
  showIndex: 0,
  popuObj: {},
  seleSbjgObj: {
    xxdwzList: [],
  },
} as any)

const popuStyle = computed(() => {
  return {
    top: `${Number(Data.seleSbjgObj?.xxdwzList[0]?.split(',')[1]) + 24}px`,
    left: `${Number(Data.seleSbjgObj?.xxdwzList[1]?.split(',')[0]) + 30}px`,
    transform: `scale(${1 / props.scale})`,
    transformOrigin: '0 0',
    transition: '0.3s',
  }
})

function showPopFun(i) {
  if (props.onelyShow) return
  Data.showPopup = true
  Data.showIndex = i
  Data.seleSbjgObj = props.result[i]
  Data.popuObj = {
    ...(currentTopic.value.ckdaInfoList.find(item => item.stId == Data.seleSbjgObj.tmid) || {}),
  }
}

function hidePopFun() {
  Data.showPopup = false
}

function handelChange(e) {
  if (e.includes('Z') && !Data.popuObj.pyDa.includes('Z')) {
    Data.popuObj.setCkda = ['Z']
  } else if (e.includes('Z') && Data.popuObj.pyDa.includes('Z')) {
    Data.popuObj.setCkda.splice(Data.popuObj.setCkda.indexOf('Z'), 1)
  }
  Data.popuObj.pyDa = Data.popuObj.setCkda.join(',')
}

function confirmAnwser() {
  currentTopic.value.ckdaInfoList.find(item => {
    if (item.stId == Data.seleSbjgObj.tmid) {
      item.pyDa = Data.popuObj.pyDa
      item.setCkda = Data.popuObj.setCkda
    }
  })
  Data.seleSbjgObj.sbdjgList = new Array(Data.seleSbjgObj?.xxsl || 2).fill('0')
  for (let i = 0; i < Data.popuObj?.setCkda.length; i++) {
    if (currentTopic.value.tmlx == '判断题') {
      Data.popuObj?.setCkda[i] === 'true' && (Data.seleSbjgObj.sbdjgList[0] = '1')
      Data.popuObj?.setCkda[i] === 'false' && (Data.seleSbjgObj.sbdjgList[1] = '1')
    } else {
      Data.seleSbjgObj.sbdjgList[Data.popuObj?.setCkda[i].charCodeAt(0) - 65] = '1'
    }
  }
}

watch(
  () => currentTopic.value.ckdaInfoList,
  val => {
    if (props.onelyShow) return
    for (let i = 0; i < val.length; i++) {
      for (let j = 0; j < props.result.length; j++) {
        if (val[i].stId == props.result[j].tmid) {
          let arr = new Array(val[i]?.xxsl || 2).fill('0')
          for (let k = 0; k < val[i]?.setCkda.length; k++) {
            if (currentTopic.value.tmlx == '判断题') {
              val[i].setCkda[k] === 'true' && (arr[0] = '1')
              val[i].setCkda[k] === 'false' && (arr[1] = '1')
            } else {
              arr[val[i].setCkda[k].charCodeAt(0) - 65] = '1'
            }
          }
          if (arr.join(',') !== props.result[j].sbdjgList.join(',')) {
            props.result[j].sbdjgList = arr
          }
        }
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
)
</script>
